<template>
  <div class="customerInfo">
    <div class="title">
      <h2>客户信息</h2>
    </div>
    <el-row>
      <el-table :data="tableData" size="large" @row-click="handleRowClick($event)">
        <el-table-column
          prop="indexId"
          label="序号"
          type="index"
          width="60"
          align="center"
        />
        <!-- <el-table-column prop="customerId" label="用户编号" align="center" width="100" /> -->
        <el-table-column
          prop="customerName"
          label="客户姓名"
          width="100px"
          align="center"
        />
        <el-table-column prop="customerAge" label="年龄" width="60px" align="center" />
        <el-table-column prop="customerSex" label="性别" width="60px" align="center" />
        <!-- <el-table-column prop="roomNo" label="房间号" width="80px" align="center" /> -->
        <el-table-column prop="bedId" label="床位号" width="80px" align="center" />
        <el-table-column prop="levelId" label="护理级别" width="100px" align="center" />
        <!-- <el-table-column prop="userId" label="健康管家" width="100px" align="center" /> -->
      </el-table>
      <el-pagination
        style="margin: 20px 40px"
        layout="prev, pager, next, jumper, ->, total,"
        :total="queryParams.total"
        v-model:page-size="queryParams.size"
        v-model:current-page="queryParams.current"
        @current-change="customerList"
        @size-change="customerList"
      />
    </el-row>
  </div>
</template>

<script setup>
import { ref, toRef, onMounted } from "vue";
import { listInfo } from "@/api/customer/checkIn/index";
import { useRoute } from "vue-router";

const { customerName, handleRowClick } = defineProps(["customerName", "handleRowClick"]); //
const loading = ref(false);

const route = useRoute();

// 监听路由参数的变化
let query = toRef(route, "query");

// 表格数据
const tableData = ref([]);

// 查询条件
const queryParams = ref({
  customerName: "",
  current: 1,
  size: 5,
  total: 0,
});

async function customerList() {
  // console.log("左侧查询参数:", queryParams.value);
  loading.value = true;
  try {
    queryParams.value.customerName = customerName;
    const page = await listInfo(queryParams.value);
    loading.value = false;
    tableData.value = page.records;
    queryParams.value.total = page.total;
  } catch (e) {
    loading.value = false;
  }
}

onMounted(() => {
  customerList();
});

defineExpose({ customerList });
</script>

<style scoped>
/* 客户信息 */
.customerInfo {
}

.customerInfo .title {
  background-color: #ffffff;
  text-align: left;
  margin: 0;
  padding: 12px;
  color: #1890ff;

  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

/* 表格样式 */
.table-header {
  color: #909399;
}

.table-row {
}

.table-row:hover {
}

.el-table {
  overflow: hidden;
  width: 100%; /* 或者一个具体的宽度值 */
}

.el-table th,
.el-table tr {
}

.el-table th {
  color: #909399;
  font-weight: bold;
}

.el-table td {
  color: #606266;
}

.el-table::before {
  height: 0;
}
</style>
